<? 
include('../../src/inst.conf.php');

	$cfg['db']['host']= "localhost";
	$cfg['db']['user']= "college";
	$cfg['db']['password']= "college";
	$cfg['db']['database']= "groenhorst_college";
//Conect to the database 
mysql_connect($cfg['db']['host'], $cfg['db']['user'], $cfg['db']['password']); 
//Select Database
mysql_select_db($cfg['db']['database']);
$query = (@$_GET['cohort'] =='' ? "" : "WHERE `COHORT` = ".@$_GET['cohort']);
?>


<!-- JavaScript -->
<script src="./js/application.js"></script>
<div class="box">
  <div class="box-header">
    <h1>Klassen</h1>
  </div>
	<select class="false" id='cohort'>
	<?php
		$query1 = mysql_query("SELECT DISTINCT `COHORT` FROM  `GROEP` ");
		echo "<option value='' ".(@$_GET['cohort'] =="" ? "SELECTED" : "").">Alle klassen</option>";	
		while($data1 = mysql_fetch_assoc($query1)){		
			echo "<option value='".$data1['COHORT']."' ".(@$_GET['cohort'] ==$data1['COHORT'] ? "SELECTED" : "").">".$data1['COHORT']."</option>";	
		}
	?>	
	</select>
	<script type='text/javascript'>
		$('#cohort').on('change', function(){
			$('#main').fadeOut('fast', function() {
				$('#main').load("./pages/klassen.php?cohort="+$('#cohort').val(), function() {
					$('#main').fadeIn('fast');
				});
			});
			$("#primary ul li").removeClass("active");
			$(this).parent().addClass("active");	
		});
		$('.wijzig').live('click', function(){
			if(!$(this).hasClass("opslaan"))
			{
				var tr = $(this).parent().parent();
				$(tr).find('td:nth-child(3)').html("<input type='text' value='"+$(tr).find('td:nth-child(3)').html()+"' id='GROEP_AANDUIDING'/>")
				$(tr).find('td:nth-child(4)').html("<input type='text' value='"+$(tr).find('td:nth-child(4)').html()+"' id='GROEP_NAAM'/>")
				$(this).addClass("opslaan").html("Opslaan");
			}
			else if($(this).hasClass("opslaan"))
			{
				var values="id="+$(tr).find('td:nth-child(1)').html()+"&GROEP_AANDUIDING="+$(tr).find('input#GROEP_AANDUIDING').val()+"&GROEP_NAAM="+$(tr).find('input#GROEP_NAAM').val();
				var tr = $(this).parent().parent();
				var this1=this;
				$.ajax({
					type: "POST",
					data: values,
					url: './test.php',
					dataType: 'JSON',
					success: function(response) {
						if(response.success=="true")
						{
							$(tr).find('td:nth-child(3)').html($(tr).find('input#GROEP_AANDUIDING').val());
							$(tr).find('td:nth-child(4)').html($(tr).find('input#GROEP_NAAM').val());
							$(this1).removeClass("opslaan").html("Wijzig");
							notification("Groep is aangepast");
							table.fnDestroy();
							var table=$('#klassen_datatable').dataTable();
						}else
						{
							notification(response.message, true);
						}	
					},
					error: function(jqXHR, textStatus, errorThrown) {
						if(textStatus=="timeout")
						{	
							//$.notify({text:'The page had an timeout', title:'Error', icon:'images/dialog-error.png'});
						}else 
						{
							notification(jqXHR.responseText, true);
						}
					}
				});
			}
		});
	</script>
  <table id="klassen_datatable" class="datatable">
    <thead>
      <tr>
        <th width="25px">ID</th>
        <th width="50px">Cohort</th>
        <th>Groep aanduiding</th>
        <th>Groep naam</th>
        <th width="200px">Acties</th>
      </tr>
    </thead>
    <tbody>
    <? 
    // haal alle docenten uit de database
    $query = mysql_query("SELECT * FROM  `GROEP` ".$query);
    while($data = mysql_fetch_assoc($query)){
    	echo"  <td>".$data['GROEP_ID']."</td>";
    	echo"  <td>".$data['COHORT']."</td>";
    	echo"  <td>".utf8_encode($data['GROEP_AANDUIDING'])."</td>";
    	echo"  <td>".utf8_encode($data['GROEP_NAAM'])."</td>";
    	echo"  <td>";
    	echo"  	<a href=\"#\" class=\"button plain wijzig\">Wijzig</a>";
    	echo"  	<a href=\"#\" class=\"button plain red\">Verwijder</a>";
    	echo"  </td>";
    	echo"</tr>";	
    }
    
    ?>
    </tbody>
  </table>
</div> 